<template>
<div class="inConbox clearfix">
  <ul class="mall_box">
      <li class="mall_item dipW" v-for="(list,index) in MallItem" :key="index" @click="addTo(index)">
      <img :src="'./static/images/mall/mall_bnner'+index+'.jpg'" alt="" class="mall_bnner">
      <div class="mall_text_box dipW">
        <h3 class="mall_title dipW">
          <i class="mall_title_img"></i>
          <span class="nall_title_Text">{{list.commodityName}}</span>
        </h3>
        <p class="mall_describe">{{list.introduction}}</p>
        <p class="mall_describe Specifications">
          <span class="Specifications-fl">规格</span>
          <span class="Specifications-fr">{{list.description}}</span>
        </p>
      </div>
    </li>
  </ul>
  <router-view></router-view>
</div>
</template>
<script>
export default {
  data(){
    return {
      transitionName: 'slide-right',      
      MallItem:'',
    }
  },
  methods:{
    addTo:function(id){
      this.$store.dispatch('showloader')  
      var _this = this
      let IDS = id + 1;
      //调用详情页的接口
      _this.axios.get(this.$busPoat.info()+IDS).then(function(response){
          var st;
          clearTimeout(st)
          st = setTimeout(() =>{
           if(response != null || response != undefined){
            if(IDS == 1){
              sessionStorage.setItem('details1',JSON.stringify(response.data)) //保存内容
            }else if(IDS == 2){
              sessionStorage.setItem('details2',JSON.stringify(response.data)) //保存内容
            }
            _this.$router.push('/bomNav/details/'+ IDS) //这里要先获取在跳转路由
              // console.log(sessionStorage.getItem('details'+IDS+'',JSON.stringify(response.data)))
            _this.$store.dispatch('hideloader')
          }else{
            _this.$store.dispatch('hideloader')            
            alert('请求加载过慢...')
          }
          clearTimeout(st)                                                                       
        },1000)
      }).catch(function (error){
        _this.$store.dispatch('hideloader')
         alert('获取商品详情失败')
      })

    }
  },
  created(){
    this.MallItem = JSON.parse(sessionStorage.getItem('MallItem')) != '' ?JSON.parse(sessionStorage.getItem('MallItem')) : ''
    if(this.$store.getters.showcontent){
      this.$store.dispatch('showloader')  
      var _this = this
      // _this.MallItem = JSON.parse(sessionStorage.getItem('MallItem'))     
      this.axios.get(this.$busPoat.infos()).then(function(response){  
        var st;
        clearTimeout(st)
        st = setTimeout(() =>{
          if(response != null || response != undefined){
            sessionStorage.setItem('MallItem',JSON.stringify(response.data.commoditys))
            _this.MallItem = JSON.parse(sessionStorage.getItem('MallItem')) 
            // console.log(_this.MallItem)//加载渲染
            _this.$store.dispatch('hideloader')
          }else{
            _this.$store.dispatch('hideloader')          
            alert('请求加载过慢...')
          }
          clearTimeout(st)                                                                       
        },1000)
      }).catch(function (error){
        _this.$store.dispatch('hideloader')
        alert('商品加载失败')
      })
      this.$store.dispatch('hideContents')
    }
  }
} 
</script>
<style lang="scss" scoped>

.mall_box{
  background: #f2f2f2;
  width: 100%;
  height: 100%;
  .mall_item{
    width: 100%;
    height: 5.1rem;
    padding:.2rem .2rem .14rem;
    background: #fff;
    margin-bottom:.2rem;    
    justify-content: center;
    .mall_bnner{
      width: 100%;
      height: 3rem;
      margin-bottom:.2rem;
    }
    .mall_text_box{
      width: 100%;
      padding:0rem .2rem;
    }
  }
}
.mall_title{
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  .mall_title_img{
    background: url('../../../static/images/mall/title_img.png') no-repeat center;
    background-size:100%;
    height: 0.22rem;
    width: 0.22rem;
    margin-right: .2rem;
  }
  .nall_title_Text{
    color:#333;
    font-size: .3rem;
    font-weight: 600;
  }
}
.mall_describe{
  font-size: .24rem;
  color:#999;
  border-bottom:.01rem solid #dedede;
  padding:.2rem 0rem ;
  width: 100%;
}
.Specifications{
  border:none;
  font-size: .2rem;  
  .Specifications-fl{
    color:#999;
    margin-right:.2rem;
  }
  .Specifications-fr{
    color:#333;
  }
}
</style>
